<template>
  <div>
    <el-container>
      <el-header>
        <div class="container">
          <div class="header">
            <div class="title">
              <img class="xiaohui" src="./images/xiaohui.png" alt />
              <img class="logo" src="./images/logo.png" alt />
              <!-- <img src="./images/logo.ong" alt=""> -->
              <h1>地层三维建模虚拟仿真实验系统</h1>
              <p>Virtual Simulation Experiment System for Formation 3D Modeling</p>
            </div>
          </div>
          <div class="navbar">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="2">项目简介</el-menu-item>
              <el-menu-item index="3">步骤解析</el-menu-item>
              <el-menu-item index="4">仿真实验</el-menu-item>
              <el-menu-item index="5">视频操作</el-menu-item>
              <el-menu-item index="6">教师队伍</el-menu-item>
              <el-menu-item index="7">关于我们</el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="main-container">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-main>
      <el-footer>
        <div class="info">
          <div class="footer-info">
            <p>长安大学&nbsp; — &nbsp;地质工程与测绘学院</p>
            <p>邮编：710054</p>
            <p>地址：中国陕西省西安市雁塔南段126号</p>
          </div>
          <div class="footer-img">
            <a href="#">
              <img src="./images/weixin.png" alt />
            </a>
            <a href="#">
              <img src="./images/weibo.png" alt />
            </a>
          </div>
        </div>
        <p id="copyright">Copyright©长安大学</p>
        <p id="copy">西部矿产资源与地质工程教育部重点实验室 版权所有</p>
        <div class="map"></div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  methods: {
    handleSelect(key, keyPath) {}
  }
};
</script>
<style lang="less" scoped>
.el-container {
  .el-header {
    height: 160px !important;
    padding: 0;
    .container {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      padding: 0 150px;
      box-sizing: border-box;
      .header {
        width: 100%;
        height: 120px;
        .title {
          height: 100%;
          width: 60%;
          position: relative;
          .xiaohui {
            position: absolute;
            top: 20px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 0 1px 4px #000;
            //box-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, -0 0 3px #000;
          }
          .logo {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 40px;
            left: 85px;
          }
          h1 {
            margin: 0;
            font-size: 30px;
            font-family: "Hiragino Sans GB";
            color: #fff;
            //filter:glow(color=#000,strength=3);
            text-shadow: 1px 0 5px #000, 0 1px 5px #000, 0 -1px 5px #000,
              -1px 0 5px #000;
            letter-spacing: 3px;
            position: absolute;
            left: 200px;
            top: 50%;
            transform: translateY(-50%);
          }
          p {
            margin: 0;
            font-size: 10px;
            font-family: "Hiragino Sans GB";
            color: #fff;
            text-shadow: 1px 0 5px #000, 0 1px 5px #000, 0 -1px 5px #000,
              -1px 0 5px #000;
            position: absolute;
            left: 200px;
            top: 80%;
            transform: translateY(-80%);
          }
        }
      }
      .navbar {
        height: 40px;
        position: relative;
        .el-menu {
          position: absolute;
          bottom: 0px;
          background-color: transparent;
        }
        .el-menu.el-menu--horizontal {
          border-bottom: none;
        }
        .el-menu-item {
          color: #4d4d4d;
          font-size: 18px;
          padding: 0 35px;
        }
        .el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
        .el-menu--horizontal > .el-submenu .el-submenu__title:hover {
          background-color: transparent;
        }
        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
        .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
          background-color: transparent;
        }
      }
    }
  }
  .el-main {
    color: #333;
    text-align: center;
    height: 600px;
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
    }
  }
  .el-footer {
    background-color: #2c2c2c;
    //opacity: 0.8;
    //background-color: #409EFF;
    color: #333;
    height: 150px !important;
    position: relative;
    padding: 0 100px;
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 150px !important;
      .footer-info {
        p {
          margin: 0;
          font-size: 14px;
          line-height: 30px;
          color: #fff;
        }
        .footer-img {
          img:hover {
            cursor: pointer;
          }
        }
      }
    }

    #copyright {
      position: absolute;
      color: #fff;
      margin: 0;
      font-size: 13px;
      bottom: 30px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #copy {
      position: absolute;
      color: #fff;
      margin: 0;
      bottom: 10px;
      font-size: 13px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .map {
      height: 150px;
      width: 203px;
      background: url(./images/ico_footer.png) no-repeat;
      background-size: cover;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }
}
</style>


